<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="assets/images/favicon.png" type="image/png">
    <title>Home</title>


    <link href="assets/plugins/morris-chart/morris.css" rel="stylesheet">
    <link href="assets/plugins/jquery-ui/jquery-ui.min.css" rel="stylesheet"/>
    <link href="assets/css/icons.css" rel="stylesheet">
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/css/style.css" rel="stylesheet">
    <link href="assets/css/responsive.css" rel="stylesheet">
    <link rel="stylesheet" href="assets/css/mycss.css">
    <link rel="stylesheet" href="assets/layui/css/layui.css">
    <link href="assets/css/pagination.css" rel="stylesheet">

</head>

<body class="sticky-header">


<!--开始左边的菜单栏-->
<div class="left-side sticky-left-side">

    <!--上方的logo-->
    <div class="logo">
        <a href="index.html"><img src="assets/images/logo.png" alt=""></a>
    </div>

    <div class="logo-icon text-center">
        <a href="index.html"><img src="assets/images/logo-icon.png" alt=""></a>
    </div>
    <!--logo-->
    <div class="left-side-inner">
        <!--Sidebar nav-->
        <ul class="nav nav-pills nav-stacked custom-nav">
            <li class="menu-list"><a href="preIndex.html"><i class="icon-home"></i> <span>后台首页</span></a>

            </li>
            <li class="menu-list "><a href="index.html"><i class="icon-home"></i> <span>资讯管理</span></a>
                <ul class="sub-menu-list">
                    <li class="active"><a href="index.html">查看当前资讯</a></li>
                    <li><a href="modify_information.html">修改资讯</a></li>
                </ul>
            </li>

            <li class="menu-list "><a href="#"><i class="icon-layers"></i> <span>风景名胜管理</span></a>
                <ul class="sub-menu-list">
                    <li><a href="show_famous_scenery.html">查看现有的风景名胜</a></li>
                    <li><a href="modify_famous_scenery.html">修改风景名胜</a></li>
                </ul>
            </li>

            <li class="menu-list"><a href="#"><i class="icon-grid"></i> <span>美食管理</span></a>
                <ul class="sub-menu-list">
                    <li><a href="show_delicious_food.html">查看现有的美食</a></li>
                    <li><a href="modify_delicious_food.html">修改美食信息</a></li>
                </ul>
            </li>

            <li class="menu-list "><a href="#"><i class="icon-envelope-open"></i> <span>旅游路线管理</span></a>
                <ul class="sub-menu-list">
                    <li><a href="show_now_route.html">查看现有的路线</a></li>
                    <li><a href="modify_route.html">修改路线</a></li>
                </ul>
            </li>

            <li class="menu-list nav-active"><a href="#"><i class="icon-loop"></i> <span>酒店的管理</span></a>
                <ul class="sub-menu-list">
                    <li><a href="show_now_hotel.html">查看现有的酒店</a></li>
                    <li><a href="modify_now_hotel.html">查看所有酒店的全部订单</a></li>
                    <li><a href="form-wizard.html">查看全部酒店的房源信息</a></li>
                </ul>
            </li>



            <li class="menu-list "><a href="#"><i class="icon-film"></i> <span>用户管理</span></a>
                <ul class="sub-menu-list">
                    <li><a href="show_user.html">查看所有的用户</a></li>
                    <li><a href="add_user.html">增加用户</a></li>
                </ul>
            </li>


            <li class="menu-list"><a href="#"><i class="icon-lock"></i> <span>账户信息</span></a>
                <ul class="sub-menu-list">
                    <li><a href="admin_information.html"> 查看信息 </a></li>
                    <li><a href="forgot-password.html"> 修改密码 </a></li>
                </ul>
            </li>

            <li><a href="calendar.html"><i class="icon-note"></i> <span>网站首页</span></a></li>
            <li><a href="http://www.pzhu.edu.cn/"><i class="icon-wrench"></i> <span>攀枝花简介</span></a></li>

        </ul>
        <!--侧边栏结束-->

    </div>
</div>
<!--End left side menu-->

<!-- 中间面板开始-->
<div class="main-content">

    <!-- 中间头部开始-->
    <div class="header-section">

        <!--控制侧边栏的伸缩状态-->
        <a class="toggle-btn"><i class="fa fa-bars"></i></a>

        <!--搜索框，需要用的时候拿出来用-->
        <!--<form class="searchform">-->
        <!--<input type="text" class="form-control" name="keyword" placeholder="请输入搜索的内容。。" />-->
        <!--</form>-->

        <!--头部右边框的信息-->
        <div class="menu-right">
            <ul class="notification-menu">

                <li>
                    <a href="#" class="btn btn-default dropdown-toggle info-number" data-toggle="dropdown">
                        <i class="fa fa-bell-o"></i>
                        <span class="badge">4</span>
                    </a>
                    <div class="dropdown-menu dropdown-menu-head pull-right">
                        <h5 class="title">Notifications</h5>
                        <ul class="dropdown-list normal-list">
                            <li class="message-list message-scroll-list">
                                <a href="#">
                                    <span class="photo"> <img src="assets/images/users/avatar-8.jpg" class="img-circle"
                                                              alt="img"></span>
                                    <span class="subject">John Doe</span>
                                    <span class="message"> New tasks needs to be done</span>
                                    <span class="time">15 minutes ago</span>
                                </a>

                                <a href="#">
                                    <span class="photo"> <img src="assets/images/users/avatar-7.jpg" class="img-circle"
                                                              alt="img"></span>
                                    <span class="subject">John Doe</span>
                                    <span class="message"> New tasks needs to be done</span>
                                    <span class="time">10 minutes ago</span>
                                </a>

                                <a href="#">
                                    <span class="photo"> <img src="assets/images/users/avatar-6.jpg" class="img-circle"
                                                              alt="img"></span>
                                    <span class="subject">John Doe</span>
                                    <span class="message"> New tasks needs to be done</span>
                                    <span class="time">20 minutes ago</span>
                                </a>

                                <a href="#">
                                    <span class="photo"> <img src="assets/images/users/avatar-6.jpg" class="img-circle"
                                                              alt="img"></span>
                                    <span class="subject">John Doe</span>
                                    <span class="message"> New tasks needs to be done</span>
                                    <span class="time">20 minutes ago</span>
                                </a>

                                <a href="#">
                                    <span class="photo"> <img src="assets/images/users/avatar-6.jpg" class="img-circle"
                                                              alt="img"></span>
                                    <span class="subject">John Doe</span>
                                    <span class="message"> New tasks needs to be done</span>
                                    <span class="time">20 minutes ago</span>
                                </a>

                                <a href="#">
                                    <span class="photo"> <img src="assets/images/users/avatar-6.jpg" class="img-circle"
                                                              alt="img"></span>
                                    <span class="subject">John Doe</span>
                                    <span class="message"> New tasks needs to be done</span>
                                    <span class="time">20 minutes ago</span>
                                </a>
                            </li>
                            <li class="last"><a href="#">All Messages</a></li>
                        </ul>
                    </div>
                </li>

                <!--用户信息的下拉框-->
                <li>
                    <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                        <img src="assets/images/users/avatar-6.jpg" alt=""/>
                        吴涛涛
                        <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu dropdown-menu-usermenu pull-right">
                        <li><a href="#"> <i class="fa fa-wrench"></i> 账户信息 </a></li>
                        <li><a href="#"> <i class="fa fa-user"></i> 修改密码 </a></li>
                        <li><a href="#"> <i class="fa fa-info"></i>帮助</a></li>
                        <li><a href="#"> <i class="fa fa-lock"></i>退出登录</a></li>
                    </ul>
                </li>

            </ul>
        </div>
        <!--中间头部结束-->

    </div>
    <!--头部分结束-->


    <!--中间包装部分开始-->
    <div class="wrapper">

        <!--中间部分的标题-->
        <div class="page-title-box">
            <h4 class="page-title">酒店管理</h4>
            <ol class="breadcrumb">
                <li>
                    <a href="#">酒店管理</a>
                </li>

                <li class="active">
                    <a href="#">查看现有的酒店</a>
                </li>
            </ol>
            <div class="clearfix"></div>
        </div>
        <!--中间部分的标题结束-->
        <!--Start row-->
        <div class="row">
            <div class="col-md-12">
                <div class="white-box">
                    <h2 class="header-title">酒店的房型信息</h2>
                    <div class="table-responsive">
                        <table class="layui-table" lay-size="sm">
                            <colgroup>
                                <col width="150">
                                <col width="200">
                                <col>
                            </colgroup>
                            <thead>
                            <tr>
                                <th style="text-align:center">房间的ID</th>
                                <th style="text-align:center">酒店的电话</th>
                                <th style="text-align:center">酒店的评分</th>
                                <th style="text-align:center">酒店的名称</th>
                                <th style="text-align:center">酒店的类型</th>
                                <th style="text-align:center">房间的名称</th>
                                <th style="text-align:center">房间的价格</th>
                                <th style="text-align:center">具有的操作</th>
                            </tr>
                            </thead>
                            <tbody id="hotelPageBody">

                            </tbody>

                        </table>
                    </div>
                </div>
            </div>
        </div>
        <!--End row-->

    </div>
    <!-- End Wrapper-->

    <!--//这里应该还需要一个分页的按键-->

    <!--Start  Footer -->
    <footer class="footer-main">Copyright &copy; 2018.Company name All rights reserved.<a target="_blank"
                                                                                          href="http://sc.chinaz.com/moban/">攀枝花学院</a>
    </footer>
    <!--End footer -->

</div>
<!--End main content -->

<!--Begin core plugin -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/plugins/moment/moment.js"></script>
<script src="assets/js/jquery.slimscroll.js "></script>
<script src="assets/js/jquery.nicescroll.js"></script>
<script src="assets/js/functions.js"></script>

<script src="assets/layui/layui.js"></script>
<script src="assets/js/jquery.pagination.js"></script>


<script>


    //Demo
    layui.use('form', function () {
        var form = layui.form;

        //监听提交
        form.on('submit(formDemo)', function (data) {
            layer.msg(JSON.stringify(data.field));
            return false;
        });


    });


    // 进行异步获取数据
    $(function () {
        generateHotelPage();
    });


    function generateHotelPage() {
        //发送请求，获得数据
        $.ajax({
            "url": "get/dispaly/hotel/sku/page",
            "type": "post",
            "contentType": "application/x-www-form-urlencoded",
            // 预期服务器返回的数据
            "dataType": "json",
            "error": function (response) {
                var message = response.responseJSON.message;
                layer.msg(message);
            },
            "success": function (response) {

                //获取分页数据
                var pageInfo = response.data;

                //生成表格数据,因为是异步请求,所以生成表格的代码必须写在success的回调函数中;
                generateHotelTable(pageInfo);

            }
        });

    }

    //生成表格数据
    function generateHotelTable(pageInfo) {
        //清除旧的数据
        $("#hotelPageBody").empty();

        //获取list属性对应的数据


        //检测list是否包含有效数据
        if (pageInfo == null || pageInfo.length == 0) {
            $("#hotelPageBody").append("<tr><td style='text-align:center; font-size: 16px' colspan='7'>抱歉！为查询到任何匹配的数据！</td></tr>");
            return;
        }

        //遍历list,从data中获取数据
        for (var i = 0; i < pageInfo.length; i++) {
            var hotelItemSku = pageInfo[i];
            var id = hotelItemSku.id;
            var hotelItemSpuTel = hotelItemSku.hotelItemSpuTel;
            var hotelItemSpuScore = hotelItemSku.hotelItemSpuScore;
            var hotelItemSpuName = hotelItemSku.hotelItemSpuName;
            var categorizationInformationName = hotelItemSku.categorizationInformationName;
            var hotelName = hotelItemSku.hotelName;
            var hotalCost = hotelItemSku.hotalCost;

            //使用元素动态进行绑定；
            var trHTML = "<tr><td style='text-align:center'>" + (i + 1) + "</td><td style='text-align:center' ><a href='#'>" + hotelItemSpuTel + "</a></td><td style='text-align:center' >" + hotelItemSpuScore + "</td><td style='text-align:center' >" + hotelItemSpuName + "</td><td style='text-align:center' >" + categorizationInformationName + "</td><td style='text-align:center'>"+hotelName+"</td><td style='text-align:center'>"+hotalCost+"</td><td style='text-align:center'><button type='button' num = " + id + " class='layui-btn deleteBtn'>删除</button></td></tr>";
            $("#hotelPageBody").append(trHTML);
        }
        bingBtn();
    }


    function bingBtn() {
        layui.use('layer', function () {
            var layer = layui.layer;
            $(".deleteBtn").on('click', function () {
                var id = $(this).attr("num");
                layer.open({
                    content: '<h2 style="text-align: center; font-family: 楷体">确认删除吗？</h2>'
                    , btn: ['确认删除', '取消']
                    , yes: function (index, layero) {
                        //按钮【按钮一】的回调，调用函数进行删除
                        deleteHotelById(id);
                        return false;
                    },
                    btn2: function (index, layero) {
                        //直接进行关闭
                    }
                    , cancel: function () {
                        //右上角关闭回调
                        // layer.msg("点击了关闭按钮！");
                        // return false;// 开启该代码可禁止点击该按钮关闭
                    }
                });
            });

        });
    }




    function deleteHotelById(hotelId) {
        $.post("delete/hotel/item/sku", {"hotelItemId": hotelId}, function (response) {
            layui.use('layer', function () {
                var layer = layui.layer;
                layer.msg(response.message);
                generateHotelPage();
            });
        })
    }

</script>


</body>


</html>
